<template>
  <div
    class="EditDataBox"
    :class="{
      darkW: theme.state.themeState == 'drak',
      lightW: theme.state.themeState == 'light',
    }"
  >
    <div class="EditDataBoxContent">
      <div class="Left">
        <el-affix :offset="70">
          <LeftSidebar :dataMenu="LeftSidebarObjRef" />
        </el-affix>
      </div>
      <div
        class="Content"
        :class="{
          dark: theme.state.themeState == 'drak',
          light: theme.state.themeState == 'light',
        }"
      >
        <div class="account">
          <div class="title">账号信息设置</div>
          <div class="header" @click="maskLayerShowOrHide">
            <img :src="headerImgRef" alt="我是头像" title="点击我上传头像" />
          </div>
          <div class="UserNameInput">
            <InputOneToOne
              :label="'UID'"
              :explain="'此处为您的唯一ID，可以令更多人找到您'"
            ></InputOneToOne>
          </div>

          <div class="UserNameInput">
            <InputOneToOne
              :label="'昵称'"
              :explain="'1~20位的昵称'"
            ></InputOneToOne>
          </div>
          <div class="UserNameInput">
            <InputOneToOne
              :label="'个人简介'"
              :explain="'1~120位的个人简介'"
            ></InputOneToOne>
          </div>
        </div>
        <div
          class="basic"
          :class="{
            darkBorder: theme.state.themeState == 'drak',
            lightBorder: theme.state.themeState == 'light',
          }"
        >
          <div class="title">基本信息设置</div>

          <div class="inputForm sex">
            <div class="label">性别</div>
            <div class="inp">
              <el-radio-group
                v-model="sexRef"
                @change="modifyData($event, 'sex')"
              >
                <el-radio :label="0">男</el-radio>
                <el-radio :label="1">女</el-radio>
              </el-radio-group>
            </div>
          </div>
          <!-- 出生日期 -->
          <div class="inputForm birthday">
            <div class="label">出生日期</div>
            <div class="inp">
              <el-date-picker
                @change="modifyData($event, 'birthday')"
                v-model="birthdayRef"
                type="date"
                placeholder="未查询到您的信息"
                :class="{
                  dark_input: theme.state.themeState == 'drak',
                  light_input: theme.state.themeState == 'light',
                }"
              />
            </div>
          </div>
          <!-- 校区 -->
          <div class="inputForm select">
            <div class="label">所属校区</div>
            <div class="inp">
              <el-select
                v-model="campusRef"
                placeholder="您还未选择校区"
                @change="modifyData($event, 'campus')"
              >
                <el-option
                  style="padding-left: 10px"
                  v-for="item in campusRefArrRef"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </div>
          <!-- 系 -->
          <div class="inputForm select">
            <div class="label">所属系</div>
            <div class="inp">
              <el-select
                v-model="departmentRef"
                placeholder="您还未选择院系"
                @change="modifyData($event, 'department')"
              >
                <el-option
                  style="padding-left: 10px"
                  v-for="item in departmentArrRef"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </div>
          <!-- 情感状况 -->
          <div class="inputForm select">
            <div class="label">情感状况</div>
            <div class="inp">
              <el-select
                v-model="emotionRef"
                placeholder="情感状况"
                @change="modifyData($event, 'emotion')"
              >
                <el-option
                  style="padding-left: 10px"
                  v-for="item in emotionArrRef"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </div>
        </div>
      </div>
      <div class="Right">
        <el-affix :offset="70">
          <LeftSidebar :dataMenu="LeftSidebarObjRef" />
        </el-affix>
      </div>
    </div>
    <div
      class="maskLayer"
      v-show="maskLayerStateRef"
      @click="maskLayerShowOrHide"
    >
      <HeaderUpLoad></HeaderUpLoad>
    </div>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { useStore } from "vuex";
import LeftSidebar from "../../../components/LeftSidebar/LeftSidebar.vue";
import RightSidebar from "../../../components/RightSidebar/RightSidebar.vue";
import HeaderUpLoad from "../../../components/HeaderUpLoad/HeaderUpLoad.vue";
import InputOneToOne from "../../../components/InputOneToOne/InputOneToOne.vue";
import ins from "../../../utils/Axios";
import { ElMessage } from "element-plus";
@Options({
  components: {
    LeftSidebar,
    RightSidebar,
    HeaderUpLoad,
    InputOneToOne,
  },
  mounted() {
    if (localStorage.getItem("token")) {
      ins
        .get("/user/getUserInfo")
        .then((res: any) => {
          if (res.data.flag) {
            this.headerImgRef = res.data.data.headerImg;
            this.sexRef = res.data.data.sex;
            this.campusRef = res.data.data.campus;
            this.departmentRef = res.data.data.department;
            this.emotionRef = res.data.data.emotion;
            this.birthdayRef = res.data.data.birthday;
          } else {
            ElMessage.error("网络出现问题，请刷新后重试！");
          }
        })
        .catch((err: any) => {
          ElMessage.error("网络超时，请刷新后重试！");
        });
    }
  },
})
export default class EditData extends Vue {
  theme: any = useStore();
  ran: number = 0;
  headerImgRef: string = "";
  sexRef: String = "";
  campusRef: String = "";
  departmentRef: String = "";
  emotionRef: String = "";
  birthdayRef: String = "";

  modifyData(val: any, key: any) {
    const data = JSON.parse(`{ "${key}": "${val}" }`);
    if (key === "birthday") {
      const dt = new Date(val);
      let str = `${dt.getFullYear()}-${
        dt.getMonth() + 1 < 10 ? "0" + (dt.getMonth() + 1) : dt.getMonth() + 1
      }-${dt.getDate() < 10 ? "0" + dt.getDate() : dt.getDate()}`;
      data["birthday"] = str;
    }
    ins
      .post("/user/editUserInfo", { ...data })
      .then((res: any) => {
        if (res.data.flag) {
          ElMessage.success("修改成功!");
          this.theme.dispatch("userInfoChange", "");
        } else {
          ElMessage.error("网络繁忙，请稍后重试！");
        }
      })
      .catch((err: any) => {
        ElMessage.error("服务器连接断开，请稍后重试！");
      });
  }

  //渲染
  LeftSidebarObjRef: Object = {
    title: "设置",
    menu: [
      {
        id: 0,
        text: "资料设置",
        icon: "icon-yonghuziliaoxiugai",
        type: "EditData",
        link: "/Set",
      },
      {
        id: 1,
        text: "账号安全",
        icon: "icon-zhanghaoanquan",
        type: "AccountSecurity",
        link: "/Set/AccountSecurity",
      },
      {
        id: 2,
        text: "隐私设置",
        icon: "icon-a-yinsibaohuyanzhengma",
        type: "Privacy",
        link: "/Set/Privacy",
      },
      {
        id: 3,
        text: "消息设置",
        icon: "icon-xiaoxishezhi",
        type: "Message",
        link: "/Set/Message",
      },
      {
        id: 4,
        text: "屏蔽设置",
        icon: "icon-pingbi",
        type: "Shielding",
        link: "/Set/Shielding",
      },
      {
        id: 5,
        text: "使用偏好",
        icon: "icon-xingqudingxiang",
        type: "Preferences",
        link: "/Set/Preferences",
      },
    ],
  };
  // 校区渲染
  campusRefArrRef: Array<Object> = [
    { id: 1, value: "兴安校区", label: "兴安校区" },
    { id: 2, value: "鹿泉校区", label: "鹿泉校区" },
    { id: 3, value: "警安校区", label: "警安校区" },
  ];
  // 院系渲染
  departmentArrRef: Array<Object> = [
    { id: 1, value: "研究生院", label: "研究生院" },
    { id: 2, value: "影视艺术学院", label: "影视艺术学院" },
    { id: 3, value: "新闻传播学院", label: "新闻传播学院" },
    { id: 4, value: "美术设计学院", label: "美术设计学院" },
    { id: 5, value: "数字艺术与动画学院", label: "数字艺术与动画学院" },
    { id: 6, value: "信息技术与文化管理学院", label: "信息技术与文化管理学院" },
    { id: 7, value: "表演艺术学院", label: "表演艺术学院" },
    { id: 8, value: "舞蹈艺术学院", label: "舞蹈艺术学院" },
    { id: 9, value: "艺术体育学院", label: "艺术体育学院" },
    { id: 10, value: "音乐学院", label: "音乐学院" },
    { id: 11, value: "足球学院", label: "足球学院" },
  ];
  // 情感状况
  emotionArrRef: Array<Object> = [
    { id: 1, value: "求交往", label: "求交往" },
    { id: 2, value: "单身勿扰", label: "单身勿扰" },
    { id: 3, value: "热恋中", label: "热恋中" },
    { id: 4, value: "千年单身", label: "千年单身" },
  ];
  maskLayerStateRef: Boolean = false;
  //隐藏/显示遮罩层
  maskLayerShowOrHide(e: any) {
    ([...e.target.classList].indexOf("maskLayer") != -1 ||
      [...e.target.classList].indexOf("header") != -1 ||
      [...e.target.classList].indexOf("close") != -1) &&
      (this.maskLayerStateRef = !this.maskLayerStateRef);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import url("../../../assets/less/global.less");
@import url("./index.less");
</style>
